<div class="row">
    <div class="col-2 zero3-layout-menu color-darkgray bg-828894">
        <div class="zero3-layout-menu-content">
            <ng-container *ngFor="let module of modules">
                <div class="zero3-module bg-626874" (click)="method.module.click($event, module)">
                    <span class="mr-1"><fa-icon [icon]="module.faIconHead"></fa-icon></span>
                    <span class="ml-1">{{module.name}}</span>
                    <span class="float-right"><fa-icon [icon]="module.faIconShowStatus"></fa-icon></span>
                </div>
                <div class="zero3-module-menus" [ngClass]="{'displayNone': !module.active}">
                    <ng-container *ngFor="let menu of module.menus">
                        <ng-container *ngIf="menu.id === 'hr'">
                            <hr class="border-secondary">
                        </ng-container>
                        <ng-container *ngIf="menu.id !== 'hr'">
                            <div class="zero3-module-menu" [ngClass]="{'bg-whitesmoke text-dark': menu.active}"
                                 (click)="method.menu.click($event, module, menu)">
                                <span class="ml-1">{{menu.name}}</span>
                            </div>
                        </ng-container>
                    </ng-container>
                </div>
            </ng-container>
        </div>
    </div>
</div>
